<script setup lang="ts">
import {ref} from "vue";
import {copyText, exit} from "@/api/funcTion";
import {useRouter} from "vue-router";
import {showToast} from "vant";
// import {outLogin} from "@/api/person/person";
// import {Tokens} from "@/stores/token";
let imgs = [
    {
        img: "/src/views/PersonalCenter/images/我的申请.png",
        text: "我的申请"
    },
    {
        img: "/src/views/PersonalCenter/images/我的发布.png",
        text: "我的发布"
    },
    {
        img: "/src/views/PersonalCenter/images/抽奖记录.png",
        text: "签到中心"
    },
    {
        img: "/src/views/PersonalCenter/images/联系客服.png",
        text: "积分明细"
    },
    {img:"/src/views/PersonalCenter/images/我的消息.png",
        text: "积分兑换记录"
    },
    {
        img: "/src/views/PersonalCenter/images/退出登录.png",
        text: "抽奖记录"
    },
    {
        img: "/src/views/PersonalCenter/images/联系客服.png",
        text: "联系客服"
    },
    {
        img: "/src/views/PersonalCenter/images/我的消息.png",
        text: "我的消息"
    },
    {
        img: "/src/views/PersonalCenter/images/退出登录.png",
        text: "退出登录"
    },
]
// 弹出框
const show = ref(false);
const show1 = ref(false);
const showPopup = () => {
    show.value = !show.value;
};
const showPopup1 = () => {
    show1.value =  !show1.value;
};
// 复制文本
const textToCopy = ref(null);
const textToCopy1 = ref(null);
// copyText(textToCopy)
// 跳转到相应页面
const router = useRouter();
function namezhi(name:any) {
     router.push({
         path:'/PersoalAplyAndPublish',
         query:{
             name,
         }
     })
}
</script>
<template>
<div>
<!--    <div  v-for="(item,index) in imgs" :key="index">-->
<!--&lt;!&ndash;        联系客服***************************&ndash;&gt;-->
<!--                        <div v-if="index==6" class="personal_information_each" @click="showPopup" >-->
<!--                            <img :src=item.img height="15" width="15" alt="">-->
<!--                            <p>{{ item.text }}</p>-->
<!--                            <img src="../images/下一步.png" height="5" width="5" alt="">-->
<!--                        </div>-->
<!--&lt;!&ndash;          退出灯登录****************                               &ndash;&gt;-->
<!--                        <div v-else-if="index==8" class="personal_information_each"  @click="showPopup1">-->
<!--                            <img :src=item.img height="15" width="15" alt="">-->
<!--                            <p>{{ item.text }}</p>-->
<!--                            <img src="../images/下一步.png" height="5" width="5" alt="">-->
<!--                        </div>-->
<!--                        <div v-else class="personal_information_each">-->
<!--                        <img :src=item.img height="15" width="15" alt="">-->
<!--                        <p>{{ item.text }}</p>-->
<!--                        <img src="../images/下一步.png" height="5" width="5" alt="">-->
<!--                        </div>-->
<!--    </div>-->
<!--    客服弹窗-->
    <van-popup v-model:show="show" round :style="{ padding: '30px',textAlign:'center' }" overlay-class="header-overlay">
    <div>
        <p  @click="copyText(textToCopy)" ref="textToCopy">联系客服（点击内容进行复制）</p>
        <p><van-icon name="service"  color="red" size="30" style="padding: 7px;background-color: #FEE5AB;border-radius: 30px;margin:20px 10px 10px 0;vertical-align:center"/>123:<span style="color: red" @click="copyText(textToCopy)" ref="textToCopy">15533903449</span></p>
        <p><van-icon name="service"  color="red" size="30" style="padding: 7px;background-color: #FEE5AB;border-radius: 30px;margin: 0 10px 20px 0"/>客服1:<span  style="color: red" @click="copyText(textToCopy1)" ref="textToCopy1">15612138191</span></p>
        <p @click="showPopup">取消</p>
    </div>
    </van-popup>
    <!--    退出登录弹框-->
    <van-popup v-model:show="show1" round :style="{ textAlign:'center' }" overlay-class="header-overlay">
        <p style="font-weight: 700;font-size: 20px;margin-top: 20px">提示</p>
        <p style="color: gray;margin: 20px 0;font-size: 20px">你确定要退出登录吗</p>
        <div style="display: flex;justify-content: space-between;text-align: center;border-top: 1px solid lightgray"><span style="padding: 10px 60px;font-size: 20px;font-weight: 700;border-right: 1px solid lightgray" @click="showPopup1">取消</span><span style="padding: 10px 60px;font-size: 20px;font-weight: 700;color: cornflowerblue" @click="exit(show1)">确定</span></div>
    </van-popup>
<div>
<!--    <router-link to="/PersoalAplyAndPublish">-->
        <div class="personal_information_each" @click="namezhi('b')">
            <img :src=imgs[0].img height="15" width="15" alt="">
            <p>{{ imgs[0].text }}</p>
            <img src="../images/下一步.png" height="5" width="5" alt="">
        </div>
<!--    </router-link>-->
    <div class="personal_information_each"  @click="namezhi('c')">
        <img :src=imgs[1].img height="15" width="15" alt="">
        <p>{{ imgs[1].text }}</p>
        <img src="../images/下一步.png" height="5" width="5" alt="">
    </div>
    <div class="personal_information_each">
        <img :src=imgs[2].img height="15" width="15" alt="">
        <p>{{ imgs[2].text }}</p>
        <img src="../images/下一步.png" height="5" width="5" alt="">
    </div>
    <router-link to="/IntegralDetails">
    <div class="personal_information_each">
        <img :src=imgs[3].img height="15" width="15" alt="">
        <p>{{ imgs[3].text }}</p>
        <img src="../images/下一步.png" height="5" width="5" alt="">
    </div>
    </router-link>
    <router-link to="/ExchangeRecord">
    <div class="personal_information_each">
        <img :src=imgs[4].img height="15" width="15" alt="">
        <p>{{ imgs[4].text }}</p>
        <img src="../images/下一步.png" height="5" width="5" alt="">
    </div>
    </router-link>
    <router-link to="BigTurntable"><div class="personal_information_each">
        <img :src=imgs[5].img height="15" width="15" alt="">
        <p>{{ imgs[5].text }}</p>
        <img src="../images/下一步.png" height="5" width="5" alt="">
    </div></router-link>
    <div  class="personal_information_each" @click="showPopup" >
        <img :src=imgs[6].img height="15" width="15" alt="">
        <p>{{ imgs[6].text }}</p>
        <img src="../images/下一步.png" height="5" width="5" alt="">
    </div>
<!--    我的消息-->
<!--    <router-link to="/PersoalAplyAndPublish" >-->
        <div class="personal_information_each" @click="namezhi('a')">
            <img :src=imgs[7].img height="15" width="15" alt="">
            <p>{{ imgs[7].text }}</p>
            <img src="../images/下一步.png" height="5" width="5" alt="">
        </div>
<!--    </router-link>-->

    <div  class="personal_information_each" @click="showPopup1" >
        <img :src=imgs[8].img height="15" width="15" alt="">
        <p>{{ imgs[8].text }}</p>
        <img src="../images/下一步.png" height="5" width="5" alt="">
    </div>
</div>
</div>
</template>

<style scoped lang="less">
//@media only screen and (min-height: 668px) {
//    .personal_information_each  {
//        margin: 30px 0;
//    }
//}
.personal_information_each {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 22px 0;
    font-size: 14px;

    p {
        width: 80%;
        color: black;
    }
}

.personal_information_each:hover {
    cursor: pointer;
}
//更改遮罩层样式
:deep(.header-overlay) {
    background-color: rgba(0, 0, 0, 0.3); // 遮罩层颜色
//backdrop-filter: blur(6px); // 模糊效果
}
</style>